<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>司机信息</title>
		<!--标准mui.css，公共样式-->
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/public.css" />
		<style type="text/css">
			.mui-btn-grey {
				color: #333;
			}
			
			.mui-btn,
			button,
			input[type=button],
			input[type=reset],
			input[type=submit] {
				border: 1px solid #ccc;
				width: 36%;
				margin: 20px calc(12%/4) 16px;
			}
			
			.mui-card-content .mui-input-group {
				border-bottom: none !important;
			}
			
			.mui-content .mui-input-row {
				height: 50px;
			}
			
			.mui-content .mui-input-row label {
				width: auto;
				padding: 11px 0;
			}
			
			.mui-content .mui-input-row input {
				float: left;
				font-size: 14px;
			}
			
			.mui-content p {
				color: #ff9000;
				float: left;
				line-height: 40px;
			}
			
			input[type=number] {
				width: 55%;
				background: #fff;
				border: 1px solid #ff9000;
				margin-right: 6px;
				padding: 0 15px;
				height: 35px;
			}
			
			.mui-content .mui-mid {
				background: #f2f2f2;
			}
			
			.cash {
				position: relative;
				display: inline-block;
				width: 120px;
			}
			
			.company {
				position: absolute;
				right: 20px;
				top: 8px;
			}
			
			.mui-numbox-input {
				padding-right: 30px !important;
				padding-left: 6px !important;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left color6"></a>
			<h1 class="mui-title color3">代叫</h1>
		</header>
		<div class="mui-content">
			<div class="mui-card-content bg_white">
				<form class="mui-input-group p_lr5">
					<div class="mui-input-row phone">
						<em class="tips mui-pull-right mui-col-sm-2" style="display: inline-block; width: 35%;height: 40px;line-height: 40px;color: red;"></em>
						<input type="text" id="phone" style="width: 65%;" class="mui-input-clear mui-col-sm-10 " placeholder="请输入联系人号码1">

					</div>
					<div class="mui-input-row phone">
						<em class="tips mui-pull-right mui-col-sm-2" style="display: inline-block; width: 35%;height: 40px;line-height: 40px;color: red;"></em>
						<input type="text" id="phone1" style="width: 65%;" class="mui-input-clear mui-col-sm-10" placeholder="请输入联系人号码2">

					</div>
					<div class="mui-input-row phone">
						<em class="tips mui-pull-right mui-col-sm-2" style="display: inline-block; width: 35%;height: 40px;line-height: 40px;color: red;"></em>
						<input type="text" id="phone2" style="width: 65%;" class="mui-input-clear mui-col-sm-10" placeholder="请输入联系人号码3">

					</div>
					<div class="mui-input-row phone">
						<em class="tips mui-pull-right mui-col-sm-2" style="display: inline-block; width: 35%;height: 40px;line-height: 40px;color: red;"></em>
						<input type="text" id="phone3" style="width: 65%;" class="mui-input-clear mui-col-sm-10" placeholder="请输入联系人号码4">

					</div>
					<div class="mui-input-row phone">
						<em class="tips mui-pull-right mui-col-sm-3" style="display: inline-block; width: 35%;height: 40px;line-height: 40px;color: red;"></em>
						<input type="text" id="phone4" style="width: 65%;" class="mui-input-clear mui-col-sm-9" placeholder="请输入联系人号码5">

					</div>

					<div class="mui-input-row">
						<label><i class="iconfont mui-icon color_green icon-dian-copy"></i></label>
						<input type="text" id="star" class="mui-input-clear" placeholder="请输入起点">
					</div>
					<div class="mui-input-row">
						<label><i class="iconfont mui-icon color_orange icon-dian-copy"></i></label>
						<input type="text" id="ends" class="mui-input-clear" placeholder="请输入终点">
					</div>
				</form>
			</div>
			<div class="mui-mid p_t11 p_lr5">
				<div class="cash">
					<p>小费：</p><input class="mui-numbox-input mui-text-center" type="number" placeholder="0" value=""><span class="company">元</span></div>
				<span class="mui-h6">( 小费金额在5-200元之间 )</span>
				<button type="button" class="mui-btn mui-btn-green w95 p_tb11_lr15 font16 bg_green b_r8" id="sendPassenger">立即代叫</button>
			</div>
		</div>
	</body>
	<!-- Mui core JavaScript-->
	<script type="text/javascript" src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/appconfig.js"></script>
	<script type="text/javascript" src="../js/jquery-2.2.4.min.js"></script>
	<script type="text/javascript">
		$("#phone").blur(phoneCheck);
		$("#phone1").blur(phoneCheck);
		$("#phone2").blur(phoneCheck);
		$("#phone3").blur(phoneCheck);
		$("#phone4").blur(phoneCheck);

		function phoneCheck() {
			var phone = $.trim($(this).val());
			var regPhone = /^(13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/;
			if(!phone) { //用户名为空

				$(this).siblings("em").show().css("color", "red").text("手机号不能为空");
				return false;
			} else if(!regPhone.test(phone)) { //格式不正确时

				$(this).siblings("em").show().css("color", "red").text("手机号格式不正确");
				return false;
			} else if(phoneExist(phone)) {
				$(this).siblings("em").css("color", "#000000").show().text("此号码为新用户");
				return false;
			} else {

				$(this).siblings("em").hide();
				return true;
			}
		}

		function phoneExist(phone) {
			var back = false;
			$.ajax({
				type: "post",
				url: webRoot + "?s=/App/Username/checkTel",
				data: {
					phone: phone
				},
				async: false,
				success: function(d) {
					var data = $.parseJSON(d);
					console.log(data.data.length);
					if(data.data.length == 1) {
						back = false;
					} else {

						back = true;
					}
				}
			});
			return back;
		}

		$("#sendPassenger").on("tap", function() {
			
			var vals=$(".phone input").val();
			var starVal=$("#star").val();
			var endVal=$("#ends").val();
			if(vals.length!=0&&starVal.length!=0&&endVal.length!=0){
				tool.openNewPage('Leaflets.html');
			}else{
				alert("请输入号码或填写位置");
			}
		});
	</script>

</html>